<template>
  <el-dialog
    v-model="visible"
    width="700px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
    v-loading="loading"
    class="unified-dialog edit-dialog-simple"
  >
    <template #header>
      <DialogHeader
        icon="Edit"
        title="简单编辑表单示例"
        description="直接使用 el-form，适用于字段较少的编辑场景"
        type="primary"
      />
    </template>
    
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      label-position="left"
    >
      <el-form-item label="Topic名称" prop="topic_name">
        <el-input
          v-model="form.topic_name"
          placeholder="请输入Topic名称"
          clearable
          :disabled="true"
        />
        <span class="form-tip">Topic名称不可修改</span>
      </el-form-item>
      
      <el-form-item label="启用监控" prop="is_monitored">
        <el-switch
          v-model="form.is_monitored"
          :active-value="1"
          :inactive-value="0"
          size="large"
        />
      </el-form-item>
      
      <el-form-item label="启用告警" prop="is_alert_enabled">
        <el-switch
          v-model="form.is_alert_enabled"
          :active-value="1"
          :inactive-value="0"
          size="large"
        />
      </el-form-item>
      
      <el-form-item label="告警阈值" prop="alert_threshold_hours">
        <el-input-number
          v-model="form.alert_threshold_hours"
          :min="1"
          :max="168"
          placeholder="小时"
          style="width: 200px"
        />
        <span class="form-tip">小时无新消息则触发告警</span>
      </el-form-item>
      
      <el-form-item label="Webhook URL" prop="webhook_url">
        <el-input
          v-model="form.webhook_url"
          placeholder="请输入企业微信/钉钉Webhook地址"
          clearable
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import DialogHeader from '@/components/DialogHeader.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const formRef = ref()
const loading = ref(false)

const form = ref({
  topic_name: '',
  is_monitored: 1,
  is_alert_enabled: 1,
  alert_threshold_hours: 24,
  webhook_url: ''
})

const rules = {
  alert_threshold_hours: [
    { required: true, message: '请输入告警阈值', trigger: 'blur' },
    { type: 'number', min: 1, max: 168, message: '告警阈值必须在1-168小时之间', trigger: 'blur' }
  ]
}

const handleClose = () => {
  visible.value = false
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    
    // 模拟保存
    await new Promise(resolve => setTimeout(resolve, 500))
    
    ElMessage.success('保存成功（演示模式）')
    emit('success')
    handleClose()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

// 监听对话框显示，初始化表单
watch(visible, (newVal) => {
  if (newVal && props.data) {
    form.value = {
      topic_name: props.data.topic_name || '',
      is_monitored: props.data.is_monitored ?? 1,
      is_alert_enabled: props.data.is_alert_enabled ?? 1,
      alert_threshold_hours: props.data.alert_threshold_hours || 24,
      webhook_url: props.data.webhook_url || ''
    }
  }
})
</script>

<style scoped>
.form-tip {
  margin-left: 12px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}
</style>

